import React, { Component } from 'react';
import { Descriptions, InputNumber, Table, Typography } from 'antd';
const { Text } = Typography;
const data = {
	id: '1',
	company_name: 'The Bike Zone',
	operator_id: '1',
	valid_from: '2021/7/12',
	valid_to: '2021/8/12',
	req_deliv_date: '2021/9/30',
	ship_to_address: '上海市',
	goods: [
		{
			goods_id: '1',
			goods_name: 'W',
			quatity: '10',
			price: '100',
			expectprice: '90'
		},
		{
			goods_id: '2',
			goods_name: 'X',
			quatity: '20',
			price: '100',
			expectprice: '95'
		},
		{
			goods_id: '3',
			goods_name: 'Y',
			quatity: '30',
			price: '200',
			expectprice: '190'
		},
		{
			goods_id: '4',
			goods_name: 'Z',
			quatity: '40',
			price: '200',
			expectprice: '180'
		}
	]
};
const dataSource = data.goods;

const columns = [
	{
		title: '产品编号',
		dataIndex: 'goods_id',
		key: 'goods_id',
		align: 'center'
	},
	{
		title: '产品名称',
		dataIndex: 'goods_name',
		key: 'goods_name',
		align: 'center'
	},
	{
		title: '订货数量',
		dataIndex: 'quatity',
		key: 'quatity',
		align: 'center'
	},
	{
		title: '产品定价（件/元）',
		dataIndex: 'price',
		key: 'price',
		align: 'center'
	},
	{
		title: '产品期望价格（件/元）',
		dataIndex: 'expectprice',
		key: 'expectprice',
		align: 'center'
	}
];

export default class DisplayQuot extends Component {
	render() {
		const { id } = this.props;
		return (
			<div>
				<div>我是一个展示组件，展示的是{id}报价单的详情</div>
				<div>
					<Descriptions layout="vertical" column={4}>
						<Descriptions.Item label="询价单编号">{data.id}</Descriptions.Item>
						<Descriptions.Item label="公司名称">{data.company_name}</Descriptions.Item>
						<Descriptions.Item label="操作员" span={2}>
							{data.operator_id}
						</Descriptions.Item>
						<Descriptions.Item label="询价日期">{data.valid_from}</Descriptions.Item>
						<Descriptions.Item label="询价有效期至">{data.valid_to}</Descriptions.Item>
						<Descriptions.Item label="预计送达日期">{data.req_deliv_date}</Descriptions.Item>
						<Descriptions.Item label="预计送货地点"><InputNumber /></Descriptions.Item>
					</Descriptions>
					<Table
						dataSource={dataSource}
						columns={columns}
						pagination={false}
						bordered
						summary={(pageData) => {
							let totalQuatity = 0;
							let totalPrice = 0;
							let totalExpectprice = 0;

							pageData.forEach(({ quatity, price, expectprice }) => {
								totalQuatity += quatity * 1;
								totalPrice += quatity * price;
								totalExpectprice += quatity * expectprice;
							});
							return (
								<Table.Summary.Row>
									<Table.Summary.Cell align="center">合计</Table.Summary.Cell>
									<Table.Summary.Cell />
									<Table.Summary.Cell align="center">
										<Text type="danger">{totalQuatity}</Text>
									</Table.Summary.Cell>
									<Table.Summary.Cell align="center">
										<Text type="danger">{totalPrice}</Text>
									</Table.Summary.Cell>
									<Table.Summary.Cell align="center">
										<Text type="danger">{totalExpectprice}</Text>
									</Table.Summary.Cell>
								</Table.Summary.Row>
							);
						}}
					/>
				</div>
			</div>
		);
	}
}
